<template>
  <div>
    <a-modal
        centered
        width="60%"
        :visible="bindingVisible"
        :title="$t('btn.bind')"
        :okText="$t('menuItem.confirm')"
        :cancelText="$t('menuItem.cancel')"
        @ok="bindingHandleOk"
        @cancel="bindingHandleCancel"
        footer=""
    >

        <a-row class="yy-Row">
          <a-col :span="4">
            <a-space>
              <a-button type="primary" v-has="'BtnQuery'" @click="queryBindingData('query')" >{{$t('btn.query')}}</a-button>
              <a-button type="primary" v-has="'BtnBindSave'" @click="saveBindingData" >{{$t('btn.save')}}</a-button>
            </a-space>
          </a-col>
        </a-row>

      <a-row class="yy-Row">
        <a-form-model layout="inline" :model="binding" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-row>
            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.templateName')" style="width: 100%;">
                <a-input v-model="binding.templateName"   allow-clear/>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item :label="$t('product')" style="width: 100%;">
                <a-input  v-model="binding.product" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :label="$t('user')" style="width: 100%;">
                <a-input v-model="binding.customerCode"  allow-clear/>
              </a-form-model-item>
            </a-col>

          </a-row>

        </a-form-model>
      </a-row>
      <a-card >
        <a-card-grid style="width: 30%;" :hoverable="false">
          <m-table
              :row-selection="rowRadioSelection"
              bordered
              rowKey="templateName"
              :pagination="pageSize"
              :dataSource="templateDataSource"
              :columns="templateColumns"
              :selection="true"
          />
        </a-card-grid>

        <a-card-grid style="width: 70%;" :hoverable="false">

         <div class="ys-Row">
           <a-radio-group v-model="bindTypeRadio" name="radioGroup">
            <a-radio value="1">{{$t('productList')}}</a-radio>
            <a-radio value="2">{{$t('customerList')}}</a-radio>
           </a-radio-group>
         </div>
          <a-card >
              <a-table
                  v-if="bindTypeRadio === '1'"
                  :row-selection="productRowSelection"
                  bordered
                  rowKey="productName"
                  :pagination="rightPageSize"
                  :dataSource="productDataSource"
                  :columns="productColumns"
                  :selection="true"
                  size="small"
              >
              </a-table>

              <a-table
                  v-if="bindTypeRadio === '2'"
                  :row-selection="customerRowSelection"
                  bordered
                  :pagination="rightPageSize"
                  rowKey="customerCode"
                  :dataSource="userDataSource"
                  :columns="userColumns"
                  :selection="true"
                  size="small"
              >
              </a-table>
          </a-card>
        </a-card-grid>
      </a-card>

    </a-modal>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import {wrap} from "lodash/function";
import MTable from "../../components/MTable";
export default {
  name: "BindingModal",
  components: {MTable},
  data() {
    return{
      listVisable: true,

      value: 1,
      userColumns: [
        {
          title: this.$t('user'),
          dataIndex: 'customerCode',
          key: Math.random(),
        }
      ],
      productColumns: [
        {
          title: this.$t('product'),
          dataIndex: 'productName',
          key: Math.random(),
        }
      ],
      pageSize: {
        pageSize: 5,
        size: 'small',
      },
      rightPageSize: {
        pageSize: 4,
        size: 'small',
      },
      templateColumns: [
        {
          title: this.$t('menuItem.templateName'),
          dataIndex: 'templateName',
          key: 'templateName',
        }
      ],
      labelCol: {
        span: 10
      },
      wrapperCol: {
        span: 14
      },

    }
  },
  computed: {
    ...mapState('barTender', ['bindingVisible','binding','templateDataSource','productDataSource','userDataSource','rowRadioSelection',
    'customerRowSelection','productRowSelection','bindType']),
    // bind类型 radio
    bindTypeRadio: {
      get() {
        return this.bindType
      },
      set(val) {
        this.setBindType(val)
      }
    },
  },
  methods: {
    ...mapMutations('barTender', ['bindingHandleOk','bindingHandleCancel','bindingClick','queryBindingData','saveBindingData','setBindType']),
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}.ys-Row {
  margin-bottom: 1.5rem;
}
</style>
